<template>
  <div
    class="menuList"
    v-Inter="option"
    :class="isCollapse == false ? 'maxHeight' : 'minHeight'"
  >
    <header>
      <div class="left">
        <i></i>
        <span>标记清单</span>
      </div>
      <div class="right" @click="collapse">
        <i class="el-icon-arrow-down"></i>
      </div>
    </header>
    <div class="tab">
      <div
        class="tab-item"
        :class="tabActive == 'detail' ? 'tab-item-active' : ''"
        @click="changeTab('detail')"
      >
        图显清单
      </div>
      <div
        class="tab-item"
        :class="tabActive == 'all' ? 'tab-item-active' : ''"
        @click="changeTab('all')"
      >
        系统清单
      </div>
    </div>
    <div class="search">
      <el-input placeholder="搜索" size="small"></el-input>
      <i class="el-icon-search"></i>
    </div>
    <div class="operate" v-show="tabActive == 'detail'">
      <el-switch
        v-model="operateValue"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
      <span>显示全部标记</span>
    </div>
    <div class="list">
      <menuItem
        v-for="(item, index) in arr"
        :key="index"
        :data="item"
        :type="tabActive"
      ></menuItem>
    </div>
  </div>
</template>

<script>
import menuItem from "./menuItem.vue";

export default {
  data() {
    return {
      operateValue: true,
      arr: [
        { text: 111, num: 1 },
        { text: 222, num: 2 },
        { text: 333, num: 3 },
      ],
      option: {
        // pardom: ".mask",
        ignore: ".ignore",
      },
      isCollapse: false, //是折叠起来的吗
      tabActive: "detail",
    };
  },
  components: {
    menuItem,
  },
  methods: {
    changeTab(val) {
      this.tabActive = val;
    },
    collapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style lang="less" scoped>
.menuList {
  position: absolute;
  width: 202px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(28, 44, 73, 0.34);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #e7ecf2;
  box-sizing: border-box;
  padding: 6px 8px;
  transition: height 0.3s;
  overflow: hidden;
}
.maxHeight {
  height: 328px;
}
.minHeight {
  height: 34px;
}
header {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 14px;
  color: #1d2129;
  line-height: 22px;
  .left {
    display: flex;
    align-items: center;
  }
  .right {
    cursor: pointer;
  }
}
.tab {
  margin-top: 9px;
  width: 186px;
  height: 34px;
  background: #f2f4f9;
  border-radius: 4px 4px 4px 4px;
  padding: 2px 13px;
  box-sizing: border-box;
  font-size: 14px;
  color: #1d2129;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 16px;
  margin-bottom: 6px;
  .tab-item {
    padding: 5px 7px;
    box-sizing: border-box;
    border-radius: 4px;
  }
  .tab-item-active {
    background: #ffffff;
    color: #1c4cba;
  }
}
.search {
  display: flex;
  margin-bottom: 9px;
  position: relative;
  i {
    position: absolute;
    right: 6px;
    top: 8px;
  }
  /deep/ .el-input__inner {
    padding-right: 26px;
  }
}
.operate {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 9px;
  box-sizing: border-box;
  border-bottom: 1px solid #e7ecf2;
}
.list {
  margin-top: 6px;
}
</style>
